Skip to content

Issue1889 vocab search a11y fixes#2017

Merged
joelit merged 19 commits intomainfrom
issue1889-vocab-search-a11y-fixes
Apr 23, 2026
Merged

Issue1889 vocab search a11y fixes#2017
joelit merged 19 commits intomainfrom
issue1889-vocab-search-a11y-fixes

Conversation

@joelit
Copy link
Copy Markdown
Contributor

@joelit joelit commented Apr 22, 2026 •
edited
Loading

Reasons for creating this PR

Link to relevant issue(s), if any

Description of the changes in this PR

This PR should be based upon PR #2004 as it improves the keyboard navigation on top of the previous accessibility improvements.

Known problems or uncertainties in this PR

Checklist

  • phpUnit tests pass locally with my changes
  • I have added tests that show that the new code works, or tests are not relevant for this PR (e.g. only HTML/CSS changes)
  • The PR doesn't reduce accessibility of the front-end code (e.g. tab focus, scaling to different resolutions, use of .sr-only class, color contrast)
  • The PR doesn't introduce unintended code changes (e.g. empty lines or useless reindentation)

@qltysh
Copy link
Copy Markdown

qltysh Bot commented Apr 22, 2026

6 new issues

Tool Category Rule Count
qlty Structure Function with high complexity (count = 5): mounted 3
qlty Structure Function with many returns (count = 38): startGlobalSearchApp 2
qlty Structure High total complexity (count = 55) 1

qltysh[bot]
qltysh Bot reviewed Apr 22, 2026
View reviewed changes
Comment thread resource/js/vocab-search.js
}
}
}
window.addEventListener('keydown', this.langMenuKeydownHandler, true)
Copy link
Copy Markdown

@qltysh qltysh Bot Apr 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Function with high complexity (count = 5): mounted [qlty:function-complexity]

Comment thread resource/js/vocab-search.js
e.stopImmediatePropagation()
this.onLangMenuKeydown(e)
}
}
Copy link
Copy Markdown

@qltysh qltysh Bot Apr 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Function with high complexity (count = 5): langMenuKeydownHandler [qlty:function-complexity]

Comment thread resource/js/vocab-search.js
this.closeLangMenu()
break
}
}
Copy link
Copy Markdown

@qltysh qltysh Bot Apr 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Function with high complexity (count = 13): onLangMenuKeydown [qlty:function-complexity]

@codecov
Copy link
Copy Markdown

codecov Bot commented Apr 22, 2026 •
edited
Loading

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 70.07%. Comparing base (17083ca) to head (18e472c).
⚠️ Report is 24 commits behind head on main.

Additional details and impacted files 
@@            Coverage Diff            @@
##               main    #2017   +/-   ##
=========================================
  Coverage     70.07%   70.07%           
  Complexity     1703     1703           
=========================================
  Files            34       34           
  Lines          4484     4484           
=========================================
  Hits           3142     3142           
  Misses         1342     1342

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@joelit joelit self-assigned this Apr 23, 2026
@joelit joelit added this to the 3.3 milestone Apr 23, 2026
@joelit joelit moved this to In progress in Skosmos 3.x Backlog Apr 23, 2026
@joelit joelit force-pushed the issue1889-vocab-search-a11y-fixes branch from d2e1e60 to c82a48d Compare April 23, 2026 06:48
@joelit
Copy link
Copy Markdown
Contributor Author

joelit commented Apr 23, 2026

Rebased to issue1889-vocab-search-a11y-fixes and force pushed.

@joelit joelit marked this pull request as ready for review April 23, 2026 07:52
@joelit joelit requested a review from UnniKohonen April 23, 2026 07:52
UnniKohonen
UnniKohonen requested changes Apr 23, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@UnniKohonen UnniKohonen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Keyboard navigation seems to work correctly for the most part and screen reader messages seem to be correct.

There were a couple of issues I noticed:

Both global and vocab search have a problem in firefox where if tab is pressed when focused on dropdown options, focus moves to the next field and then immediately back. This causes the screen reader to read both aria labels. It seems like this issue was not present previously so it should be maybe fixed. In chrome, tab moves focus to the next dropdown option which is probably fine.

Dropdown chevrons have moved in the wrong position. These rules should be included for the .chevron class to fix the problem:

right: 1rem;
top: 50%;
transform: translate(0, -50%);

and for .dropdown-toggle:

padding-right: 2.5rem

Vocab search language dropdown hover and focus effects have also changed. If this is not intentional, they should be fixed (it seems to be at least partially because language selection list no longer has the language-list id).

There is also a failing cypress test in vocab search page but it probably doesn't originate from this PR.

@joelit
Copy link
Copy Markdown
Contributor Author

joelit commented Apr 23, 2026

Keyboard navigation seems to work correctly for the most part and screen reader messages seem to be correct.

There were a couple of issues I noticed:

Both global and vocab search have a problem in firefox where if tab is pressed when focused on dropdown options, focus moves to the next field and then immediately back. This causes the screen reader to read both aria labels. It seems like this issue was not present previously so it should be maybe fixed. In chrome, tab moves focus to the next dropdown option which is probably fine.

I cannot reproduce this behavior in Firefox or Chrome. I get the expected bahavior where tab moves the focus to the next menu, as intended.

Dropdown chevrons have moved in the wrong position. These rules should be included for the .chevron class to fix the problem:

right: 1rem;
top: 50%;
transform: translate(0, -50%);

and for .dropdown-toggle:

padding-right: 2.5rem

Thanks! Fixed as suggested.

Vocab search language dropdown hover and focus effects have also changed. If this is not intentional, they should be fixed (it seems to be at least partially because language selection list no longer has the language-list id).

That was not intentional. Thanks for spotting it (I wish we had tests for CSS too). Fixed.

There is also a failing cypress test in vocab search page but it probably doesn't originate from this PR.

@joelit joelit merged commit eb6747c into main Apr 23, 2026
17 of 19 checks passed
@github-project-automation github-project-automation Bot moved this from In progress to Issue/PR closed in Skosmos 3.x Backlog Apr 23, 2026
@joelit joelit deleted the issue1889-vocab-search-a11y-fixes branch April 23, 2026 09:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@qltysh qltysh[bot] qltysh[bot] left review comments

@UnniKohonen UnniKohonen UnniKohonen requested changes

Assignees

@joelit joelit

Labels

accessibility front-end

Projects

Skosmos 3.x Backlog
Status: Issue/PR closed

Milestone

3.3

Development

Successfully merging this pull request may close these issues.

Vocabulary Search Bar: Add keyboard support for accessibility

2 participants

@joelit @UnniKohonen